<template>
  <!-- 这是通知组件  差一个删除-->
  <div class="notice-box">
    <h3 style="text-align: center;">通知栏</h3>

    <div class="notice-list">
      <template v-for="item in noticeData" :key="item.id">
        <div class="notice-item">

          <!-- 头像时间等 -->
          <div class="notice-item-top">
            <!-- 把头像和用户名绑定起来  -->
            <div>
              <img :src="item.profilePic" class="notice-img">
              {{ item.nickName }}
            </div>
            <div style="display: flex;align-items: center;">
              {{ item.fendTime }}
              <img @click="onDelete(item.informId)" src="/src/assets/svg/delete.svg" class="icon-img">
            </div>
          </div>
          <!-- 通知内容 给内容一些限制-->
          <div style="margin-top: 5px;">
            <span class="notice-title">标题：{{ item.informTitle }}</span>
          </div>
          <div class="notice-text">
            {{ item.informText }}
          </div>

        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import userHttp from "@/api/userHttp";
import Index from "@/views/index.vue";
import { onMounted, ref } from "vue";
import useUserStore from "@/stores/useUserStore";
import { openInfo } from "@/utils/openInfo";


const userStore = useUserStore()
const noticeData = ref({});


onMounted(() => {
  getMyInform()
})

//获取我的通知信息
function getMyInform() {
  userHttp.getMyInform(userStore.userInfo.userId).then((res) => {
    console.log(res);
    if (res.code == 200) {
      noticeData.value = res.data
      //修改时间格式
      for (let i = 0; i < noticeData.value.length; i++) {
        noticeData.value[i].fendTime = noticeData.value[i].fendTime.replace("T", " ")
      }
    }
  })
}

//删除我的通知
function onDelete(informId) {
  userHttp.deleteInform(informId).then((res)=>{
    if(res.code == 200){
      openInfo(res.msg)
      //重新获取通知列表的数据
      getMyInform()
    }
  })
}

</script>

<style scoped>
/* 通知列表 */
.notice-list {
  display: flex;
  /* 整个列表都是从上到下的 */
  flex-direction: column;
}

/* 每一条通知 */
.notice-item {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: background-color 0.8s ease;

}

.notice-item:hover {
  background-color: rgba(235, 163, 163, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 阴影 */
}

/**头像 姓名 发送时间 */
.notice-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 头像 */
.notice-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* 通知的内容 */
.notice-text {
  margin-top: 10px;
  font-family: "微软雅黑";
  font-style: italic;
  /*斜体*/
  font-weight: lighter;
  font-size: 14px;
  line-height: 1.5;
  /*行高 */
  overflow: hidden;
  /*隐藏超出容器部分的内容 */
  display: -webkit-box;
  /**这是 -webkit-line-clamp 正常工作的前提条件之一 */
  -webkit-box-orient: vertical;
  /**设置盒子的方向为垂直 */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  /**在超出部分显示省略号 */
}

/* 删除图标 */
.icon-img {
  cursor: pointer;
  margin-left: 20px;
  transition: transform 0.4s ease;
  /* 图片的过渡效果 */
}

.icon-img:hover {
  transform: scale(1.4);
  /* 放大图片 */
}

.notice-title {
  margin-top: 150px;
  padding: 5px;
  font-size: 16px;
  font-family: '宋体-简';
  text-shadow: 10px 0px 40px rgb(208, 230, 180);
  font-style: italic;
}
</style>